<script setup lang="ts">
import { FullScreen, Sunny, Moon } from '@element-plus/icons-vue'
import { useLayoutConfigStore } from '@/store/layoutConfig'
import { useFullscreen, useDark } from "@vueuse/core"
import { Local } from '@/utils/storage'
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'

const router = useRouter()

const state = reactive({
  username: Local.get('isRemember').username,
})

/**
 * 切换全屏
 */
const layoutConfig = useLayoutConfigStore()
let { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
async function handleToggleFullscreen() {
  await toggleFullscreen()
  layoutConfig.isFullscreen = isFullscreen.value
}

const isDark = useDark({
  valueDark: 'dark', // 暗黑模式，在 html元素的class属性值
  valueLight: '', // 高亮时，在html元素的class属性值
  initialValue: 'auto', // 初始模式: dark|auto ( 高亮模式)
})
console.log('isdark', isDark.value);

function changeDark(val: any) {
  layoutConfig.isDrak = val;
}

</script>

<template>
  <div class="flex justify-center items-center mr-[-15px]">
    <!-- 工具栏 -->
    <div
      class="flex w-100px items-center justify-around p-6px mr-20px bg-[#f9f9f9] border border-solid border-[#ddd] shadow-[0px_0px_12px_rgba(0,0,0,.12)] rounded-1">
      <div class="cursor-pointer" @click="changeDark">
        <el-icon v-if="!isDark" :size="22">
          <Sunny class="transition ease-in-out delay-100 hover:scale-130 duration-10" />
        </el-icon>
        <el-icon v-else :size="22" class="cursor-pointer">
          <Moon class="transition ease-in-out delay-100 hover:scale-130 duration-10" />
        </el-icon>
      </div>
      <div class="cursor-pointer" @click="handleToggleFullscreen">
        <el-icon :size="21">
          <FullScreen class="transition ease-in-out delay-100 hover:scale-130 duration-10" />
        </el-icon>
      </div>
    </div>
    <el-dropdown class="flex items-center cursor-pointer mr-16px">
      <div class="flex items-center justify-center">
        <div>
          <SvgIcon class="animate-pulse" width="26" height="26" name="avatar12"></SvgIcon>
        </div>
        <div class="h-60px lh-60px pl-2px text-16px font-500 text-[#363739]">{{ state.username }}</div>
      </div>
      <template #dropdown>
        <el-dropdown-menu class="px-10px">
          <el-dropdown-item @click="router.replace('/resetPwd/')">重置密码</el-dropdown-item>
          <el-dropdown-item @click="router.replace('/login/')" divided>退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped lang="scss"></style>